<script lang="ts" setup>
import bg1 from '@/assets/images/home/ido-bg1.png'
import bg2 from '@/assets/images/home/ido-bg2.png'
import {useI18n} from "vue-i18n";

const {t} = useI18n()
</script>

<template>
  <div class="bg-[#CDDFF7] absolute right-0 left-0 top-0 h-[148px] xs:hidden"></div>
  <div class="border-b-[#BED4FF] border-b-[1px]">
    <div class="start-wrapper relative flex flex-column overflow-hidden">
      <div class="start-title">{{ t('message.ido.start.title') }}</div>
      <div class="start-sub-title">{{ t('message.ido.start.subtitle') }}</div>
      <div class="start-intro">
        {{ t('message.ido.start.intro') }}
      </div>
      <v-btn class="buy-shark-btn">{{ t('message.ido.start.btn') }}</v-btn>

      <img :src="bg1" alt="" class="ido-start-bg-1 float-animation"/>
      <img :src="bg2" alt="" class="ido-start-bg-2"/>

      <div class="bubble x1"></div>
      <div class="bubble x2"></div>
      <div class="bubble x3"></div>
      <div class="bubble x4"></div>
      <div class="bubble x5"></div>
      <div class="bubble x6"></div>
      <div class="bubble x7"></div>
      <div class="bubble x8"></div>
      <div class="bubble x9"></div>
      <div class="bubble x10"></div>
      <div class="bubble x11"></div>
      <div class="bubble x12"></div>
      <div class="bubble x13"></div>
      <div class="bubble x14"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.start-wrapper{
  background: white;
  border-radius: 16px 16px 0px 0px;
  border-top: 1px solid #BED4FF;
  border-left: 1px solid #BED4FF;
  border-right: 1px solid #BED4FF;
  @apply xl:mx-[98px] lg:mx-[88px] md:mx-[68px] sm:mx-[50px] xs:border-none xs:h-auto pl-[196px] pt-[132px] md:pl-[116px] md:pt-[82px] sm:pl-[86px] sm:pt-[52px] xs:p-6;

  .start-title{
    width: 620px;
    font-size: 98px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    line-height: 1;
    @apply md:text-[78px] sm:text-[58px] xs:mt-[56px] xs:text-[32px] xs:text-center xs:w-full;
  }
  .start-sub-title{
    margin-top: 10px;
    margin-bottom: 24px;
    width: 576px;
    font-size: 72px;
    font-family: DINPro-Light, DINPro;
    font-weight: 300;
    color: #161615;
    line-height: 72px;
    @apply text-left z-50 md:text-[48px] sm:text-[38px] md:w-[524px] sm:w-[424px] xs:mt-[6px] xs:mb-[12px] xs:text-[32px] xs:w-[280px] xs:leading-[40px] xs:text-center xs:w-full;
  }
  .start-intro{
    width: 566px;
    margin-bottom: 60px;
    font-size: 16px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #7A7893;
    line-height: 26px;
    @apply z-[99] md:w-[630px] sm:w-[430px] xs:w-full xs:mb-8 xs:leading-[22px] xs:text-center;
  }

  .buy-shark-btn {
    width: 198px;
    height: 56px;
    margin-bottom: 130px;
    background: #2B6EEF;
    border-radius: 8px;
    font-size: 18px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #FFFFFF;
    box-shadow: none !important;
    @apply xs:text-[14px] xs:w-[120px] xs:h-10 sm:mb-[64px] xs:mb-[60px] xs:self-center;
  }
}

.ido-start-bg-1{
  @apply absolute xl:top-[230px] xl:right-[284px] lg:top-[210px] lg:right-[124px] md:top-[250px] md:right-[54px] sm:bottom-[180px] sm:right-[62px] md:w-[326px] md:h-[214px] sm:w-[244px] sm:h-[166px] xs:relative xs:right-[unset] xs:top-[unset] xs:w-full xs:h-[214px] xs:mb-[66px] xs:z-50;
}
.ido-start-bg-2{
  @apply z-10 absolute bottom-0 xl:right-[132px] lg:right-[80px] md:right-[10px] sm:right-[30px] md:w-[226px] md:h-[384px] sm:w-[168px] sm:h-[286px] xs:hidden;
}

.x1 {
  animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 17%;
  top: 13%;
  transform: scale(0.6);
}
.x2 {
  animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 74%;
  top: 12%;
  transform: scale(0.4);
}
.x3 {
  animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 60%;
  top: 24%;
  transform: scale(0.7);
}
.x4 {
  animation: animateBubble 20s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 43%;
  top: 32%;
  transform: scale(0.5);
}
.x5 {
  animation: animateBubble 22s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 22%;
  top: 37%;
  transform: scale(0.5);
}
.x6 {
  animation: animateBubble 14s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 72%;
  top: 35%;
  transform: scale(0.8);
}
.x7 {
  animation: animateBubble 12s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 1%;
  top: 46%;
  transform: scale(0.6);
}
.x8 {
  animation: animateBubble 16s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 28%;
  top: 62%;
  transform: scale(0.4);
}
.x9 {
  animation: animateBubble 16s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 69%;
  top: 56%;
  transform: scale(0.6);
}
.x10 {
  animation: animateBubble 24s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 20%;
  top: 72%;

  transform: scale(0.8);
}
.x11 {
  animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 36%;
  top: 73%;

  transform: scale(0.6);
}
.x12 {
  animation: animateBubble 24s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 53%;
  top: 78%;

  transform: scale(0.4);
}
.x13 {
  animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 74%;
  top: 76%;

  transform: scale(0.7);
}
.x14 {
  animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 94%;
  top: 79%;

  transform: scale(0.8);
}
</style>
